<template>
    <div>
        <el-breadcrumb separator="/" class="allgoods-top">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/business' }">后台管理系统</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/business/allgoods' }">全部商品</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="goods-header">
            <el-input v-model="searchName" placeholder="请输入商品名称" style="width: 500px;"></el-input><el-button type="primary" @click="addGoods">添加商品</el-button>
        </div>
        <good-table :allGoods="allGoods" :searchName="searchName" @changeGoods="changeGoods"></good-table>
        <div v-show="isAdd" class="add-form">
                <i class="el-icon-error close" @click="close"></i>
                <h2 style="text-align: center; margin-bottom: 30px"><span v-show="!isEdit">添加商品</span><span v-show="isEdit">编辑商品</span></h2>
                <el-steps class="addgoods-title" :active="active" finish-status="success">
                    <el-step title="步骤 1" description="商品基本信息"></el-step>
                    <el-step title="步骤 2" description="商品图片"></el-step>
                    <el-step title="步骤 3" description="商品参数"></el-step>
                    <el-step title="步骤 4" description="商品详细信息(图片格式)"></el-step>
                </el-steps>
                <essential-info :addGoodsIfo="addGoodsIfo" class="allgoos-items"
                 v-show="active === 0" @overEssentiall="next"></essential-info>
                <goods-images :isEdit="isEdit" ref="goodsImgfile"  @goodsImage="goodsImage" :goodsImages="goodsFile" class="allgoos-items" v-show="active === 1" @previous="previous"></goods-images>
                <goods-params :isEdit="isEdit" ref="paramsFile" @sendAllParams="sendAllParams" :params="params"  class="allgoos-items" v-show="active === 2" @previous="previous"></goods-params>
                <goods-desc :isEdit="isEdit" ref="goodsDesc" :desc="desc" class="allgoos-items"  v-show="active === 3" />
            <el-button type="primary" class="sendsGoods" @click="sendGoods" v-show="active === 3" >上传商品</el-button>
        </div>
        <shade v-show="isAdd"/>

    </div>
</template>

<script>
    import GoodTable from "components/content/business/goods/GoodTable";
    import EssentialInfo from "components/content/business/goods/addform/EssentialInfo";
    import GoodsImages from "components/content/business/goods/addform/GoodsImages";
    import GoodsParams from "components/content/business/goods/addform/GoodsParams";
    import GoodsDesc from "components/content/business/goods/addform/GoodsDesc";
    import Shade from "components/common/shade/Shade";

    import { sendwithpost } from "../../../network/profile";
    import { debounce } from "../../../common/util";

    export default {
        name: "AllGoods",
        data() {
            return {
                searchName:'',
                addGoodsIfo: {
                    name: '',
                    price: '',
                    describe: '',
                    stock: '',
                    category: [],
                    isSell: true

                },
                // 全部商品类别
                allGoods: this.$store.state.allGoods,
                // 活跃步骤 || 控制显示页面
                active: 0,
                // 是否添加
                isAdd: false,
                //  商品图片
                goodsFile: [],
                // 商品参数
                params:[],
                // 商品描述
                desc: [],
                // 修改数据存储
                editGoods: null,
                // 判断当前状态是否为修改商品行为
                isEdit: false,
                changeIndex: null
            }
        },
        components: {
            GoodTable,
            EssentialInfo,
            GoodsImages,
            GoodsParams,
            GoodsDesc,
            Shade
        },
        created() {
          this.$store.dispatch('getAllGoods')
        },
        methods: {
            addGoods() {
                this.isAdd = true
            },
            goodsImage() {
                // this.goodsFile.push(...value);
                this.next()
            },
            sendAllParams(value) {
                // this.params.push(...value)
                this.next()
            },

            sendGoods() {
                // 抽离基本信息
                if (this.isEdit) {
                    let formData = new FormData();
                    for(let i in this.addGoodsIfo) {
                        if (i === 'paramsFilename' ||i ==='descFilename' || i === 'goodsFilename' || i == 'params'
                            || i === 'desImg' || i === 'goodsImg') {
                            continue
                        } else {
                            formData.append(i, this.addGoodsIfo[i])
                        }
                    };

                    if (this.$refs.goodsImgfile.delGoodsFile.length != 0) {
                        for (let i of this.$refs.goodsImgfile.delGoodsFile) {
                            formData.append('delGoodsFile', i);
                        }
                    };
                    if (this.$refs.goodsImgfile.addFile.length != 0) {
                        this.$refs.goodsImgfile.addFile.forEach(item=> {
                            formData.append('goods', item.img)
                        })
                    };
                    if (this.$refs.paramsFile.delGoodsParamsUrl.length != 0) {
                        this.$refs.paramsFile.delGoodsParamsUrl.forEach(item=> {
                            formData.append('delGoodsParamsUrl', item)
                        })
                    };
                    this.params.forEach(item=> {
                        if (item.isEdit) {
                            formData.append('goodsParams', item.data);
                            formData.append('paramTitle', item.title);
                        }
                    });
                    if (this.$refs.goodsDesc.delDescFile.length != 0) {
                        for (let i of this.$refs.goodsDesc.delDescFile) {
                            formData.append('delDescFile', i);
                        }
                    };
                    if (this.$refs.goodsDesc.addDescFile.length != 0) {
                        this.$refs.goodsDesc.addDescFile.forEach(item=> {
                            formData.append('goodsDesc', item.img)
                        })
                    };
                    sendwithpost({
                        url: '/editgoods',
                        data: formData
                    }).then(res=> {
                        if (res.data.res_code == 2) {
                            this.$store.commit('changeGoods', {
                                data: res.data.goods,
                                index: this.changeIndex
                            })
                            this.initializationData();
                            this.$refs.goodsImgfile.delGoodsFile = [];
                            this.$refs.goodsImgfile.addFile = [];
                            this.$refs.goodsDesc.delGoodsFile = [];
                            this.$refs.goodsDesc.addFile = [];
                            this.$message({
                                showClose: true,
                                type: 'warning',
                                message: '修改成功！'
                            })
                        }
                    })
                }
                else {
                    let formData = new FormData();
                    for(let i in this.addGoodsIfo) {
                        formData.append(i, this.addGoodsIfo[i])
                    }

                    this.goodsFile.forEach(item=> {
                        formData.append('goods', item.img)
                    });
                    this.params.forEach(item=> {
                        formData.append('goodsParams', item.data);
                        formData.append('paramTitle', item.title);
                    });
                    this.desc.forEach(item=> {
                        formData.append('goodsDesc', item.img)
                    })

                    sendwithpost({
                        url: '/sendGoods',
                        data: formData
                    }).then(res=> {
                        if (res.data.res_code == 2) {
                            // this.allGoods.push(res.data.goods)
                            this.$store.commit('addGoods', res.data.goods)
                            this.$message({
                                showClose: true,
                                type: 'success',
                                message: '添加成功！'
                            })
                            this.initializationData()
                        }
                    })
                }

            },
            next() {
                this.active++;
            },
            previous() {
              this.active--;
            },
            initializationData() {
                this.addGoodsIfo= {
                    name: '',
                    price: '',
                    describe: '',
                    stock: '',
                    category: [],

                }
                this.goodsFile = []
                this.params = []
                this.desc = []
                this.$refs.goodsImgfile.clearFiles();
                this.$refs.goodsDesc.clearFiles();
                this.active = 0;
                this.isAdd = false;
                this.isEdit = false;
                this.editGoods = null;
                this.changeIndex = null
            },
            changeGoods(scope) {
                if (scope.row.isSell) {
                    alert("请选择关闭当前商品售卖状态")
                    return
                } else {
                    this.isAdd = true;
                    this.addGoodsIfo = {
                        ...scope.row
                    };
                    this.isEdit = true;
                    this.goodsFile = scope.row.goodsImg;
                    this.params = scope.row.params;
                    this.desc = scope.row.desImg;
                    this.changeIndex = scope.$index;
                }

            },
            close() {
                this.initializationData();
                this.$refs.goodsImgfile.delGoodsFile = [];
                this.$refs.goodsImgfile.addFile = [];
                this.$refs.goodsDesc.delGoodsFile = [];
                this.$refs.goodsDesc.addFile = [];
            }
        }

    }
</script>

<style scoped>
    .allgoods-top, goods-header {
        margin-bottom: 20px;
    }
    .goods-header {
        display: flex;
    }
    .allgoos-items {
        padding: 30px;
        width: 500px;
        margin: 0 25%;
    }
    .addgoods-title {
        width: 700px;
        margin: 0 25%;
    }
    .sendsGoods {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translate(-50%);
    }
    .add-form {
        position: absolute;
        width: 1000px;
        margin: 0 auto;
        padding: 100px;
        top: 100px;
        z-index: 9;
        background-color: #fff;
    }
    .close {
        position: absolute;
        top: 20px;
        right: 20px;
        color: #b0b0b0;
    }
    .close:hover {
        color: #333333;
    }
</style>